<template>
  <div class="regulateJobsItem">
    <div class="wrap" @click="toDetail">
      <div class="top">
        <image class="image" webp="true" v-if="item['status'] == 1" src="@/pages2/static/images/zsz.png" mode="widthFix" />
        <image class="image" webp="true" v-if="item['status'] == 2" src="@/pages2/static/images/shz.png" mode="widthFix" />
        <image class="image" webp="true" v-if="item['status'] == 3" src="@/pages2/static/images/gbzw.png" mode="widthFix" />
        <image class="image" webp="true" v-if="item['status'] == 4" src="@/pages2/static/images/shz.png" mode="widthFix" />
        <image class="image" webp="true" v-if="item['status'] == 5" src="@/pages2/static/images/shbtg.png" mode="widthFix" />
        <text class="isjj" v-if="item.is_buy_top && item.status == 4">已购买置顶，审核通过后将直接置顶展示该信息</text>
        <!-- <image class="is_top" v-if="item.is_top && item.status == 1" src="@/pages2/static/images/top-icon.png" mode="widthFix" /> -->
        <image class="is_top" @click="toDetail" src="@/pages2/static/images/top-icon.png" v-if="item['is_top'] && item.status == 1"></image>
      </div>
      <div class="title">{{ $getTitleText(item.positions) }}</div>
      <div class="content">{{ item.description }}</div>
      <div class="image_box" v-if="item.photo_urls">
        <image @click="preview(index)" :key="index" v-for="(item2, index) in getImages(item.photo_urls)" :src="item2" mode="aspectFill" fit="cover" />
      </div>
      <div class="line"></div>
      <div class="bottom">
        <div class="item address">
          <i class="iconfont cyweizhi"></i>
          <text>{{ item.address || "暂无地址" }}</text>
        </div>
        <div class="item phone">
          <i class="iconfont cydian_hua"></i>
          <text>{{ item.contact }}</text>
        </div>
      </div>
    </div>
    <div class="show-time">
      <div class="st-left">
        <template v-if="!!item.refresh_time">刷新时间:{{ item.show_time }}</template>
        <template v-else>发布时间:{{ item.show_time }}</template>
      </div>
      <div class="btn_wrap t-right" @click="editJob" v-if="item.status == 5">
        <div class="btn" :style="{ marginBottom: '10px' }">立即修改</div>
      </div>
      <button class="st-right" type="default" :data-name="'shareBtn'" :open-type="'share'" :data-info="item" v-if="item.status == 1">去分享</button>
    </div>
    <!-- 展示中 -->
    <div class="zsz_btg" v-if="item.status == 1 || item.status == 3 || (!item.is_buy_top && (item.status == 1 || item.status == 4))">
      <div class="zsz_left">
        <div class="info" v-if="item.status == 1 || item.status == 3">
          <div class="now" @click="updateStatus(1)" :class="[item.status == 1 && 'zsz_active']">正在招聘</div>
          <div class="no" @click="updateStatus(3)" :class="[item.status == 3 && 'zsz_active']">关闭招聘</div>
        </div>
      </div>
      <div class="zsz_right">
        <div class="edit" @click="editJob" v-if="item.status == 1 || item.status == 3">
          <i class="icon"></i>
          <text>修改</text>
        </div>
        <div class="delete" @click="deleteItem" v-if="item.status == 1 || item.status == 3">
          <i class="icon"></i>
          <text>删除</text>
        </div>
        <div class="top" v-if="!item.is_buy_top && (item.status == 1 || item.status == 4)" @click="topItem">
          <i class="icon"></i>
          <text>置顶</text>
        </div>
        <div class="reload" @click="refreshItem" v-if="item.status == 1">
          <i class="icon"></i>
          <text>刷新</text>
        </div>
      </div>
    </div>
    <!-- 审核不通过 -->
    <div class="btg" v-if="item['status'] == 5">
      <div class="desc">不通过原因：{{ item.fail_reason }}</div>
    </div>
    <center-popup
      :show="showCenterPopup"
      content="当前招聘信息开放中,是否正确删除该招聘信息,删除后将不再展示;"
      submitText="确定"
      @close="showCenterPopup = false"
      @submit="updateStatus(2)"
    ></center-popup>
    <contact-popup
      @submit="goChonzhi"
      :show="showContactPopup"
      @close="showContactPopup = false"
      title="温馨提示"
      content="当前您的积分不足，是否前往获取积分？"
      btnTetx="去获取积分"
    ></contact-popup>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import ContactPopup from "@/pages2/components/popup/contactPopup.vue";
import centerPopup from "@/pages2/components/popup/centerPopup.vue";
export default {
  components: { centerPopup, ContactPopup },
  name: "regulateJobsItem",
  props: {
    item: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      showCenterPopup: false,
      showContactPopup: false,
    };
  },
  created() {
    console.log(this.item);
  },
  methods: {
    ...mapActions("user", ["setStatus"]),
    goChonzhi() {
      this.showContactPopup = false;
      this.$togo("/pages3/integralRechargePage");
    },
    deleteItem() {
      this.showCenterPopup = true;
    },
    editJob() {
      // this.$redirectTo("/pages2/postOffer", { id: this.item.id });
      this.$togo("/pages2/postOffer", { id: this.item.id });
    },
    // 页面跳转
    async topItem() {
      this.$togo("/pages2/topRecruitment", { id: this.item.id, from: "list" });
    },
    async refreshItem() {
      let params = {
        id: this.item.id,
        integral: 1,
      };
      let res = await this.$http.requestSync("/jobs/refresh", params);

      try {
        if (res.code == 200) {
          this.$layer.message("刷新成功", 3000);
          this.$emit("update");
        } else {
          this.showContactPopup = true;
        }
      } catch (error) {
        this.showContactPopup = true;
      }
    },
    preview(index) {
      uni.previewImage({
        current: index,
        urls: this.data["photo_urls"],
      });
    },
    getImages(str) {
      return str.split(",");
    },
    async updateStatus(status) {
      if (status == this.item.status) {
        return;
      }
      let params = {
        id: this.item.id,
        status: status,
      };
      // status 1、生效， 2、删除，3、暂停，4、待审核，5、审核拒绝
      let res = await this.$http.requestSync("/jobs/update_status", params);
      if (res.code == 200) {
        if (status === 2) {
          this.showCenterPopup = false;
        }
        this.setStatus();
        setTimeout(() => {
          this.$back();
        }, 500);
        // this.$emit("update");
      }
    },
    toDetail() {
      if (this.item.status == 4) {
        return;
      }
      this.$togo("/pages2/jobDetail", { id: this.item.id });
    },
  },
};
</script>

<style lang="scss" scoped>
.regulateJobsItem {
  .wrap {
    width: 100%;
    background: #fdfafa;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #ffd5d5;
    margin: 0 auto;
    margin-bottom: 15px;
    min-height: 50px;
    box-sizing: border-box;
    padding-bottom: 4px;
    .top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-content: center;
      height: 30px;
      .image {
        max-width: 65px;
        height: 28.5px !important;
        margin-left: -7px;
        margin-top: 1px;
      }
      .isjj {
        font-size: 11px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff8822;
        line-height: 30px;
        margin-right: 6px;
      }
      .is_top {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 36px;
        height: 36px;
      }
    }
    .title {
      box-sizing: border-box;
      padding: 0 10px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin: 7px auto 10px;
      @include ells(2);
    }
    .content {
      box-sizing: border-box;
      padding: 0 10px;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      margin-bottom: 10px;
      @include ells(3);
    }
    .image_box {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      margin-bottom: 10px;
      image {
        width: 76px;
        height: 76px;
        border-radius: 6px;
        margin-right: 9px;
        flex-shrink: 0;
      }
      image:last-child {
        margin-right: 0px;
      }
    }
    .line {
      width: 93%;
      margin: 0 auto;
      height: 1px;
      background: #e4e4e4;
      margin-bottom: 10px;
    }
    .bottom {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 10px;
      margin-bottom: 11px;
      .item {
        font-size: 11px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        display: flex;
        align-items: center;
        margin-right: 11px;
        position: relative;
        .iconfont {
          font-size: 12px;
        }
        &::after {
          content: "";
          width: 1px;
          height: 10px;
          background: #e4e4e4;
          position: absolute;
          right: -6px;
        }
      }
      .item:last-child:after {
        display: none;
      }
    }
  }
  .btg {
    .desc {
      height: 36px;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #f54a4a;
      margin: 10px 0;
    }
  }
  .show-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .st-left {
      color: #999999;
      font-size: 12px;
      max-width: 60%;
    }
    .st-right {
      width: 80px;
      height: 28px;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ff8822;
      border-radius: 14px;
      color: #fff;
      font-size: 12px;
      transition: all 0.5s ease;
    }
  }
  .zsz_btg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto;
    margin-bottom: 15px;
    .zsz_left {
      display: flex;
      align-content: center;
      text-align: center;
      width: 132px;
      height: 27px;
      .info {
        display: flex;
        align-content: center;
        text-align: center;
        background: #efefef;
        border-radius: 14px 14px 14px 14px;
        line-height: 27px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        .now {
          width: 66px;
          height: 27px;
        }
        .no {
          width: 66px;
          height: 27px;
          border-radius: 14px 14px 14px 14px;
        }
        .zsz_active {
          background: #ff8822;
          border-radius: 14px 14px 14px 14px;
          color: #fff;
          transition: all 0.5s ease;
        }
      }
    }
    .zsz_right {
      display: flex;
      align-items: center;
      font-size: 12px;
      .edit {
        display: flex;
        align-items: center;
        margin-right: 7px;
        flex-shrink: 0;
        .icon {
          width: 20px;
          height: 20px;
          background: url("@/pages2/static/images/bj.png");
          background-position: center;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 3px;
        }
        text {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8822;
        }
      }
      .delete {
        display: flex;
        align-items: center;
        margin-right: 7px;
        flex-shrink: 0;
        .icon {
          width: 20px;
          height: 20px;
          background: url("@/pages2/static/images/sc.png");
          background-position: center;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 3px;
        }
        text {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8822;
        }
      }
      .top {
        display: flex;
        align-items: center;
        margin-right: 7px;
        flex-shrink: 0;
        .icon {
          width: 20px;
          height: 20px;
          background: url("@/pages2/static/images/zd.png");
          background-position: center;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 3px;
        }
        text {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8822;
        }
      }
      .reload {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        .icon {
          width: 20px;
          height: 20px;
          background: url("@/pages2/static/images/sx.png");
          background-position: center;
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 3px;
        }
        text {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8822;
        }
      }
    }
  }
  .btn_wrap {
    // width: 100%;
    display: flex;
    justify-content: flex-end;
    .btn {
      text-align: center;
      line-height: 27px;
      width: 76px;
      height: 27px;
      background: #ff8822;
      border-radius: 14px 14px 14px 14px;
      font-size: 12px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
